[제이쿼리] text() 또는 html() 사용시 텍스트만 지우고 태그는 남기는 방법

특정 요소에 있는 텍스트 값을 변경하려고 한다. 만약 그 안에 텍스트 뿐만 아니라 어떤 태그도 담겨 있다면? 제이쿼리(jQuery)를 사용해 text() 또는 html()을 사용하면 간단하게 텍스트를 수정할 수 있으나 그 하위 자식 요소들도 함께 지워지기 때문에 이 방법이 아닌 다른 방법이 필요하다. 이때 어떻게 하면 할 수 있을까?

간단할 것 같으면서 막상 생각해보면 잘 떠오르지 않는다. 이 경우 간단하게 생각할 수 있는 방법이 바로 clone() 함수를 이용하여 해결하는 방법이다. 만약 태그가 아래와 같다면...

클릭할 수 있는 버튼 형태의 span 태그로 안에 > 모양의 아이콘 태그가 있음


이를 해결하는 플로우는 다음과 같다.

1. div 태그의 자식 요소를 선택하여 복사해둔다. Clone() 을 사용


2. div 태그의 택스트를 원하는 문구로 바꾼다. 예를 들어 No Click으로 바꾼다면


3. 복사한 자식 태그를 div에 추가한다.


Clone() 함수를 사용해 간단하게 해결되었다!!